タグで上手に整理整頓。Contentfulのタグ機能について解説します。

#Contentful

小西諒

2023.12.19

どうも、ベルリンオフィスの小西です。

今回は、ヘッドレスCMSのContentfulでも便利な機能の一つ、「タグ機能」について紹介します。

タグ機能は、コンテンツの整理や検索、グルーピングをスムーズに行うための強力なツールです。この記事では、タグ機能の基本的な使い方や注意点について解説していきます。

ContentfulのTags（タグ機能）とは？

Contentfulのタグ機能は、コンテンツに対してキーワードやラベルを付与することができる機能 です。これにより、コンテンツを特定のカテゴリに分類したり、関連するコンテンツを簡単に見つけたりすることが可能になります。

よく聞かれるのですが、どちらかというと 記事管理者向けの機能 のため、フロントエンドで記事に関連タグを付与したいケースなどでは注意が必要だったりします（後述）。

プラン制限なく誰でも使える機能なため、記事数が増えてきたらぜひ活用したい機能です。

タグ機能でできること

コンテンツの整理とカテゴリ分け

タグは 記事にも画像にも付与する ことが可能で、コンテンツを関連するテーマやトピックに基づいて整理することができます。これにより、ダッシュボード上で特定のタグに絞って表示・検索することもできます。

例: 「example」というタグが付与された記事を絞り込んでいます。

scr_2023-12-18_1902

権限管理に活用する

カスタムロールという機能と一緒に利用することで、「特定のタグが付与された記事を編集禁止/のみ編集許可」という権限が作成できます。

例えば「編集禁止」というタグを作成し、そのタグが付与された記事に対して、「管理者未満のユーザーは編集を拒否する」ポリシーが作成できます。

scr_2023-12-18_1907

タグ自体の管理権限も設定でき、同一スペース内のユーザーに対して記事アクセスを完全に制限できるようになります。

タグの使い方

使い方はいたってシンプルです。

タグの作成

ダッシュボード右上の [Settings] から [Tags] 編集ページに移動します。

scr_2023-12-18_1901

[Create Tag] から新規タグを作成します。 scr_2023-12-18_1904

タグを作成する際は、「タグ名」と「タグID」を入力します。

タグ名 ... 任意の識別名。日本語が利用可能。
ID ... 文字、数字、ピリオド、ハイフン、アンダースコア記号のみ利用可能

タグの付与

記事編集ページに移動し、[Editor] タブから [Tags] タブに移動し、先ほど作成したタグを選択できます。

scr_2023-12-18_1908

付与手順は画像などのアセットでも同様です。

タグのステータス（公開/非公開）

タグ自体が [Private] （非公開）もしくは [Public] （公開）というステータスを持ちます。タグ作成後にこのタイプを変更することはできません。デフォルトでは、タグは [Private] です。

scr_2023-12-18_1910

[Private] タグは、関連する権限を持つユーザーのみが表示できます。

[Public] タグは誰にでも表示され、Content Delivery API を介してクライアント側のアプリに返すこともできます。コンテンツタイプをまたいでコンテンツをグループ化したり、グループ化された記事またはアセットをアプリケーションからクエリする場合に便利です。

そのため、Web アプリ内のコンテンツを整理するには [Private] タグを使用し、アプリケーション内のコンテンツを整理するには [Public] タグを使用しましょう。

接頭辞の活用

タグは接頭辞ごとにグループ化できます。

記号 (ハイフン、コロン、ドット、アンダースコア、またはハッシュ) で区切られたタグ名を記事またはアセットに割り当てると、記事編集ページの下に関連グループとして表示されます。

下記の例では「2024」から始まるタグが複数あるためグループ化されています。

scr_2023-12-18_1909

複数記事へのタグの一括付与

複数の記事やアセットに一度にタグを追加することもできます。

2023-04-19_11-32-12

APIでのタグの利用

タグで絞り込む記事の取得

単一もしくは複数のタグIDを指定して、該当する記事もしくはアセットのリストを取得できます。

curlの例

curl --include \
     --request GET \
     https://cdn.contentful.com/spaces/{SPACE_ID}/environments/{ENVIRONMENT_ID}/entries?access_token={ACCESS_TOKEN}&metadata.tags.sys.id[all]=tagA,tagB

また、「タグが1つも付与されていない」や「タグが1つでも付与されている記事」という絞り込みも可能です。

...&metadata.tags[exists]=false

レスポンスに格納されるタグ情報

タグ情報は、取得した記事の metadata プロパティに格納されます。

例:

{
  "fields": {
    "title": {
      "en-US": "Hello, World!"
    },
    ...（略）
  },
  "metadata": {
    "tags": [
      {
        "sys": {
          "type": "Link",
          "linkType": "Tag",
          "id": "2024-popular"
        }
      }
    ]
  },
  "sys": {
    ...（略）
  }
}

タグの付与

CMA（Contentful Management API）を使ったPUTリクエストで、既存記事へタグの付与が可能です。

例:

curl --include \
     --request PUT \
     --header 'Authorization: Bearer <cma_token>' \
     --header 'Content-Type: application/vnd.contentful.management.v1+json' \
     --header 'X-Contentful-Content-Type: hfM9RCJIk0wIm06WkEOQY' \
     --data-binary '{
       "fields": {
         "title": {
           "en-US": "Hello, World!"
         },
         ...（略）
       },
       "metadata": {
         "tags": [
           {
             "sys": {
               "type": "Link",
               "linkType": "Tag",
               "id": "2024-popular"
             }
           }
         ]
       }
     }' \
     https://api.contentful.com/spaces/{SPACE_ID}/environments/{ENVIRONMENT_ID}/entries/{ENTRY_ID}

調べたところ、記事の新規作成時にはタグ付与はできないようでした。あくまでPUTリクエスト限定ということですね。

タグの更新

同じくCMAとPUTを使って、タグ自体の情報の更新を行うことも可能です。

例:

curl --include \
     --request PUT \
     --header 'Authorization: Bearer <cma_token>' \
     --header 'Content-Type: application/vnd.contentful.management.v1+json' \
     --header 'X-Contentful-Version: 1' \
     --data-binary '{
       "name": "2024 - 人気記事",
       "sys": {
         "id": "2024-popular-new",
         "type": "Tag"
       }
     }' \
     https://api.contentful.com/spaces/{SPACE_ID}/environments/{ENVIRONMENT_ID}/tags/2024-popular